{% extends 'base.html' %}

{% block contents_inner %}
    <div class="col-12">
        <form action="" method="post" id="dataForm">
            {% csrf_token %}
            <div class="section-content">
                <div class="content-details show">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>城市</label>
                                <select id="provinceSelect" class="form-control" name="province">
                                    <option value="">请选择省份</option>
                                    {% for province in provinces %}
                                        <option value="{{ province }}">{{ province }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>日期（2019-2023）</label>
                                <input type="date" class="form-control datepicker" name="datepicker">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-6">
        <div class="content-details" id="pieChart1" style="width: 100%; height: 600px;"></div>
    </div>
    <div class="col-md-6">
        <div class="content-details" id="pieChart2" style="width: 100%; height: 600px;"></div>
    </div>
{% endblock %}


{% block js_code %}
<script>
    var myChart1 = echarts.init(document.getElementById('pieChart1'));
    var myChart2 = echarts.init(document.getElementById('pieChart2'));

    $('#dataForm').change(function() {
        var province = $('#provinceSelect').val();
        var date = $('.datepicker').val();
        if (province && date) {
            $.ajax({
                url: '{% url 'chart:AQI_distribution' %}', // 这里填写后端提供co数据的URL
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                data: {'province': province, 'date': date},
                success: function(data) {
                    var option1 = {
                      title: {
                        text: '空气质量等级占比分布图',
                        subtext: data.province + data.dates,
                        left: 'center'
                      },
                      tooltip: {
                        trigger: 'item'
                      },
                      legend: {
                        orient: 'vertical',
                        left: 'left'
                      },
                      series: [
                        {
                          name: 'AQI等级（天）',
                          type: 'pie',
                          radius: '50%',
                          data: data.aqi_values,
                          emphasis: {
                            itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                          }
                        }
                      ]
                    };
                    myChart1.setOption(option1);

                    var option2 = {
                      title: {
                        text: '首要污染物占比分布图',
                        subtext: data.province + data.dates,
                        left: 'center'
                      },
                      tooltip: {
                        trigger: 'item'
                      },
                      legend: {
                        orient: 'vertical',
                        left: 'left'
                      },
                      series: [
                        {
                          name: '首要污染物（天）',
                          type: 'pie',
                          radius: '50%',
                          data: data.primary_pollutant,
                          emphasis: {
                            itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                          }
                        }
                      ]
                    };
                    myChart2.setOption(option2);
                },
                error: function(error) {
                    console.error('请求数据失败:', error);
                }
            });
        }
    });
</script>
{% endblock %}

